<template>
	<view>
		<u-toast ref="uToast" />
		<view>
			<view class='head'>
				<textarea v-model="form.text" :maxlength="200" placeholder="请说说你今天的美好生活吧!" placeholder-class="text"/>
				<view class='num'>{{form.text.length}} / 200</view>
			</view>
			
			<view class="images">
				<u-upload :action="action"
					:show-progress='false' 
					max-count="6" 
					@on-success="onSuccess" 
					@on-remove="onRemove" :file-list="form.images" ></u-upload>
				<u-toast ref="uToast" />
			</view>
			
			<view class="tags">
				<view classs='tag' v-for="(v,k) in topic" :key="k" @click='onChose_xz' :data-name="v.t_name">
					<u-tag v-if="form.topic.indexOf(v.t_name)<0" :text="'#'+v.t_name+'#'" type='info' shape='circle'/>
					<u-tag v-else :text="'#'+v.t_name+'#'" type='primary' shape='circle'/>
				</view>
				<view classs='tag' @click='onCustom'>
					<u-tag text="#自定义#" type='info' shape='circle' />
				</view>
			</view>
			
			<u-modal v-model="show" title="自定义话题" @confirm="onZdy" @cancel="onZdy_cancel" :show-cancel-button="true">
				<view class="slot-content">
					<u-field
						v-model="text"
						label="话题"
						placeholder="请填写自定义话题">
					</u-field>
				</view>
			</u-modal>
			
			<view class="submit">
				<button type="default" @click="submit">提交动态</button>
			</view>
		</view>
	</view>
</template>

<script>
	import config from '../../static/js/config.js'
	
	export default{
		data(){
			return{
				form:{
					text:'',
					images:[],
					topic:[]
				},
				action: config.url,
				topic:null,
				images:[],
				show:false,
				text:''
			}
		},onLoad(){
			this.onLoad();
		},created(){
			this.action+='/upload/index'
		},methods:{
			onSuccess(data, index, lists) {
				if(data.code==1){
					this.images.push(data.src);
					this.$refs.uToast.show({
						title: '上传成功',
						type: 'success'
					})
				}else{
					this.$refs.uToast.show({
						title: data.msg,
						type: 'error'
					})
				}
			},
			onRemove(index, lists){
				this.form.images.splice(index,1);
				this.images.splice(index,1);
			},
			onLoad(){
				var that=this;
				
				this.$request({
					url:'/dynamic/topic_show',
					success(res){
						if(res.data.code==1){
							that.topic=res.data.data.topic;
							
							uni.stopPullDownRefresh();
						}else{
							that.$refs.uToast.show({
								title: res.data.msg,
								type: 'info'
							});
						}
					},fail(res){
						that.$refs.uToast.show({
							title: '网络繁忙',
							type: 'warning'
						})
					}
				})
			},
			submit(){
				var form=JSON.parse(JSON.stringify(this.form));
				
				if(form.text==''){
					return this.$refs.uToast.show({title: '请输入动态内容'});
				}
				
				var that=this;
				
				form.images=this.images.join(',');

				this.$request({
					url:'/dynamic/release',
					data:form,
					success(res){
						if(res.data.code==1){
							that.$refs.uToast.show({
								title: '提交成功',
								type: 'success'
							});
							
							setTimeout(function(){
								uni.redirectTo({
								    url: '/pages/user/my_dynamic'
								});
							},1300)
						}else{
							that.$refs.uToast.show({
								title: res.data.msg,
								type: 'warning'
							})
						}
					},fail(res){
						that.$refs.uToast.show({
							title: '网络繁忙',
							type: 'warning'
						})
					}
				})
			},
			onChose_xz(e){//选择
				var text=e.currentTarget.dataset.name;
			
				var form=this.form;
				
				var index=form.topic.indexOf(text);
				
				if(index>-1){
					form.topic.splice(index,1);
				}else{
					form.topic.push(text);
				}
			},
			onCustom(){//自定义
				this.show=true;
			},
			onZdy(){
				if(this.text==''){
					return this.$refs.uToast.show({
						title: '请输入自定义话题',
						type: 'default'
					})
				}
				
				var form=this.form;
				
				var index=form.topic.indexOf(this.text);
				
				this.topic.push({t_name:this.text})
				
				if(index>-1){
					form.topic.splice(index,1);
				}else{
					form.topic.push(this.text);
				}
				
				this.text="";
			},
			onZdy_cancel(){
				this.show=false;
			}
		}
	}
</script>

<style scoped>
	.head{
		padding:30rpx;
		margin:40rpx;
		border:1px solid #CDCDCD;
		border-radius:15rpx;
	}
	.head .text{
		color:#B2B2B2;
		font-size:28rpx;
	}
	.head .text textarea{
		height:350rpx;
	}
	.head .num{
		font-size:28rpx;
		color:#888;
		text-align: right;
	}
	.images{
		padding:40rpx;
	}
	.submit{
		position: fixed;
		bottom:0;
		width:100%;
	}
	.submit button{
		border:0;
		background:#EA4389;
		color:#fff;
		font-size:38rpx;
	}
	.tags{
		padding:30rpx;
	}
	.tags view{
		float:left;
		margin-right:20rpx;
		margin-top:10rpx;
	}
</style>
